<template>
  <div id="app">
    <!-- <img
      alt="Vue logo"
      src="./assets/logo.png"
    >
    <HelloWorld msg="Welcome to Your Vue.js App" />
    <h1>{{$store.state.count}}</h1>
    <button @click='add(200)'>+</button>
    <button @click='minus(-100)'>-</button>
    <button @click='changeCount(9999)'>qq</button>

    <ul>
      <li
        v-for='i in ary'
        ref='box'
      >{{i}}</li>
    </ul> -->
    <router-link to="/home">home</router-link>
    <router-link to="/about">about</router-link>

    <!-- <router-link to="/aaa?q=123&b=3543">aaa</router-link>
    <router-link :to="{path:'/aaa',query:options}">aaa</router-link>
    <router-link to="/qweqwe">any</router-link>
    <router-link to="/about/123456">about</router-link>
    <router-link :to="'/about/'+id">about2</router-link>
    <!-- <router-link :to="{path,name,params,query}">about</router-link>
    <router-link :to="{name:'about',params:{qqq:id+666}}">about3</router-link> -->
    <router-view></router-view>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
import { mapMutations } from "./store/myvuex";
export default {
  name: "App",
  data() {
    return {
      ary: [1, 2, 3, 4, 5],
      id: "werwerq",
      options: { www: 1231312, rrr: 5466456, t: 45646 },
    };
  },
  mounted() {
    // DOM的更新是一个异步操作
    // console.log(this.$refs.box.length);
    // this.ary.push(100);
    // // console.log(this.$refs.box.length);
    // this.ary.push(100);
    // // console.log(this.$refs.box.length);
    // this.ary.push(100);
    // // console.log(this.$refs.box.length);
    // this.ary.push(100);
    // // console.log(this.$refs.box.length);
    // this.ary.push(100);
    // // console.log(this.$refs.box.length);
    // this.$nextTick(() => {
    //   // console.log(this.$refs.box.length);
    // });
    // this.ary.push(100);
    // // console.log(this.$refs.box.length);
    // this.$nextTick(() => {
    //   // console.log(this.$refs.box.length);
    // });
    console.log(this.ary);
  },
  components: {
    HelloWorld,
  },
  methods: {
    // changeCount(n){this.$store.commit("changeCount", n);}
    ...mapMutations(["changeCount"]),
    // ...mapMutations("A", ["changeName"]),
    add() {
      // this.$store.state.count += 100;
      this.$store.commit("changeCount", 200);
    },
    minus() {
      // this.$store.commit("changeCount", -500);
      this.$store.dispatch("changeCount", -100);
    },
  },
};
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
